<template>
  <div class="echart" ref='echarts'>
  
    <ul>
      <el-collapse-transition>
  
        <li v-if='c1.close'>
    
          <h3 class='title'>
    
            <span>年龄结构</span>
    
            <span>
    
             <i class="fa fa-minus" v-if='c1.min' @click.stop='c1.min = false'></i>

              <i class="fa fa-plus" v-else @click.stop='c1.min = true'></i>

              <i class="fa fa-times" @click.stop='c1.close = false'></i>

            </span>
    
          </h3>
          <el-collapse-transition>
            <div id='content1' v-show='c1.min' style='width:528.16px;height:420px'></div>
          </el-collapse-transition>
        </li>

      </el-collapse-transition>

       <el-collapse-transition>
        <li v-if='c2.close'>
    
          <h3 class='title'>
    
            <span>学历结构</span>
    
             <span>
    
              <i class="fa fa-minus" v-if='c2.min' @click.stop='c2.min = false'></i>

              <i class="fa fa-plus" v-else @click.stop='c2.min = true'></i>

              <i class="fa fa-times" @click.stop='c2.close = false'></i>

            </span>
    
          </h3>
          <el-collapse-transition>
           <div id='content2' v-show='c2.min' style='width:528.16px;height:420px'></div>
          </el-collapse-transition>  
        </li>
       </el-collapse-transition>

      <el-collapse-transition>
          <li v-if='c3.close'>
      
            <h3 class='title'>
      
              <span>性别分布</span>
      
               <span>
    
                  <i class="fa fa-minus" v-if='c3.min' @click.stop='c3.min = false'></i>

                  <i class="fa fa-plus" v-else @click.stop='c3.min = true'></i>

                  <i class="fa fa-times" @click.stop='c3.close = false'></i>

                </span>
      
            </h3>
            <el-collapse-transition>
               <div id='content3' v-show='c3.min' style='width:528.16px;height:420px'></div>
             </el-collapse-transition>
          </li>
      </el-collapse-transition>
    </ul>
  
    <el-dialog size='' :visible.sync="dialogTableVisible" top='8vh'>
  
      <el-table :data="tableData" style="width:800px" stripe>
  
        <el-table-column property="emplid" label="员工编号"></el-table-column>
  
        <el-table-column property="name" label="姓名"></el-table-column>
  
        <el-table-column property="dept_descr" width="300" label="所在部门"></el-table-column>
  
        <el-table-column label="操作">
  
          <template slot-scope="scope">
  
                  <el-button 
  
                     size="mini"
  
                     type="primary" @click="ComputedEmplid(scope)">干部任免审批表</el-button>
          </template>
        </el-table-column>
      </el-table> 

    
          <el-pagination
              @current-change='currentChange'	
              :page-size="6"
              layout="total, prev, pager, next"
              :total="total"
              style='margin-top:20px;padding:0px;margin-left:-6px'
              >
            </el-pagination>
           <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogTableVisible = false">关闭</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>

  import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';

  import echarts from "echarts";
  
  import Vue from "vue";
  
  import URL from "../../common/js/dataLookUrl";
  
  import {
  
    Table,
  
    TableColumn,
  
    Dialog,
  
    Button,
  
    Pagination
  
  } from "element-ui";
  
  Vue.use(Table);
  
  Vue.use(TableColumn);
  
  Vue.use(Dialog);
  
  Vue.use(Button);
  
  Vue.use(Pagination);

  Vue.component(CollapseTransition.name, CollapseTransition)

  
  export default {
  
    props: ["res", "title"],
  
    data() {
  
      return {

        c1: {
  
          min: true,
  
          close: true
  
        },

        c2: {
  
          min: true,
  
          close: true
  
        },

        c3: {
  
          min: true,
  
          close: true
  
        },
  
        tableData: [],
  
        total: 0,
  
        dialogTableVisible: false,
  
        ageName: "",
  
        sex: "",
  
        leaderUnit: "",
  
        highestEdu: ""
  
      };
  
    },
  
    computed: {
  
      leaderType() {
  
        if (this.title == '集团领导') {
  
          return 'A'
  
        } else {
  
          return 'B'
  
        }
  
      }
  
    },
  
    mounted() {
  
      if (this.$refs.echarts) {
  
        let ageData = [{
  
            value: this.res.info.fiftyabovecount,
  
            name: "50岁以上人数：" +
  
              this.res.info.fiftyabovecount +
  
              "人(" +
  
              this.res.info.fiftyabovescale +
  
              ")"
  
          },
  
          {
  
            value: this.res.info.fortytofiftysdcount,
  
            name: "45岁到50岁人数：" +
  
              this.res.info.fortytofiftysdcount +
  
              "人(" +
  
              this.res.info.thirtytofortysdscale +
  
              ")"
  
          },
  
          {
  
            value: this.res.info.thirtytofortysmcount,
  
            name: "40岁到45岁人数：" +
  
              this.res.info.thirtytofortysmcount +
  
              "人(" +
  
              this.res.info.thirtytofortysmscale +
  
              ")"
  
          },
  
          {
  
            value: this.res.info.thirtytofortycount,
  
            name: "30岁到40岁人数：" +
  
              this.res.info.thirtytofortycount +
  
              "人(" +
  
              this.res.info.thirtytofortyscale +
  
              ")"
  
          },
  
          {
  
            value: this.res.info.thirtybelowcount,
  
            name: "30岁以下人数：" +
  
              this.res.info.thirtybelowcount +
  
              "人(" +
  
              this.res.info.thirtybelowscale +
  
              ")"
  
          }
  
        ];
  
  
  
        let educationData = [];
  
  
  
        this.res.education.forEach((ele, i) => {
  
          educationData.push({
  
            value: this.res.education[i].educount,
  
            name: `${this.res.education[i].highest_edu || "未填写"}：${this.res
  
              .education[i].educount}人(${this.res
  
              .education[i].eduscale})`
  
          });
  
        }, this);
  
  
  
        let sexData = [{
  
            value: this.res.info.boycount,
  
            name: `男：${this.res.info.boycount}人(${this.res.info.boyscale})`
  
          },
  
          {
  
            value: this.res.info.grilcount,
  
            name: `女：${this.res.info.grilcount}人(${this.res.info.grilscale})`
  
          },
  
          {
  
            value: this.res.info.othercount,
  
            name: `未知：${this.res.info.othercount}人(${this.res.info.otherscale})`
  
          }
  
        ];
  
  
  
        this.$nextTick(function() {
  
          this.drawPie("#content1", ageData, "年龄分布", "60%");
  
        });
  
  
  
        this.$nextTick(function() {
  
          this.drawPie("#content2", educationData, "学历结构", ["50%", "70%"]);
  
        });
  
  
  
        this.$nextTick(function() {
  
          this.drawPie("#content3", sexData, "性别分布", "60%", true);
  
        });
  
      }
  
    },
  
  
  
    methods: {
  
      ComputedEmplid: function(data) {
  
        localStorage.setItem('em_leader', data.row.emplid)
  
  
  
        window.open('module/leaderAppoint.html');
  
      },
  
      drawPie(id, datas, name, type, showFlag) {
  
        this.charts = echarts.init(this.$refs.echarts.querySelector(id));
  
        this.charts.setOption({
  
          tooltip: {
  
            trigger: "item",
  
            formatter: "{b}"
  
          },
  
  
  
          legend: {
  
            show: showFlag,
  
            x: "left",
  
            data: datas,
  
            formatter: function(val) {
  
              return val.split("：")[0];
  
            }
  
          },
  
          series: [{
  
            name: name,
  
            type: "pie",
  
            radius: type,
  
            center: ["45%", "50%"],
  
            data: datas,
  
  
  
            label: {
  
              normal: {
  
                show: true,
  
                formatter: function(val) {
  
                  return val.name.split("：").join("\n");
  
                }
  
              }
  
            },
  
  
  
            labelLine: {
  
              normal: {
  
                lengh: 10,
  
                length2: 10
  
              }
  
            }
  
          }]
  
        });
  
  
  
        this.charts.on("click", echartsData => {
  
          let Dataname = echartsData.data.name.split("：")[0];
  
          this.ageName = "";
  
          this.sex = "";
  
          this.highestEdu = "";
  
  
  
          switch (Dataname) {
  
            case "30岁以下人数":
  
              this.ageName = "thirtybelow";
  
              break;
  
            case "30岁到40岁人数":
  
              this.ageName = "thirtytoforty";
  
              break;
  
  
  
            case "40岁到45岁人数":
  
              this.ageName = "fortysvfifty";
  
              break;
  
            case "45岁到50岁人数":
  
              this.ageName = "fortysyfifty";
  
              break;
  
            case "50岁以上人数":
  
              this.ageName = "fiftyabove";
  
              break;
  
            case "男":
  
              this.sex = "M";
  
              break;
  
            case "女":
  
              this.sex = "F";
  
              break;
  
            case "未知":
  
              this.sex = "Y";
  
              break;
  
            case "未填写":
  
              this.highestEdu = 'empty';
  
              break;
  
            default:
  
              this.highestEdu = Dataname;
  
              break;
  
          }
  
  
  
  
  
          let params = {};
  
  
  
          if (this.ageName) {
  
            params = {
  
              leaderType: this.leaderType,
  
              ageRange: this.ageName,
  
              pageNum: 1,
  
              pageSize: 6
  
            };
  
          } else if (this.sex) {
  
            params = {
  
              leaderType: this.leaderType,
  
              sex: this.sex,
  
              pageNum: 1,
  
              pageSize: 6
  
            };
  
          } else {
  
            params = {
  
              leaderType: this.leaderType,
  
              highestEdu: this.highestEdu,
  
              pageNum: 1,
  
              pageSize: 6
  
            };
  
          }
  
  
  
          this.Axios.Post(URL.getempleMaintainBylist.url, params).then(res => {
  
            this.tableData = res.data.datas;
  
            this.total = res.data.total;
  
          });
  
          this.dialogTableVisible = true;
  
        });
  
      },
  
      currentChange(index) {
  
        let params = {};
  
        let pageNum = index;
  
        if (this.ageName) {
  
          params = {
  
            leaderType: this.leaderType,
  
            ageRange: this.ageName,
  
            pageNum: pageNum,
  
            pageSize: 6
  
          };
  
        } else if (this.sex) {
  
          params = {
  
            leaderType: this.leaderType,
  
            sex: this.sex,
  
            pageNum: pageNum,
  
            pageSize: 6
  
          };
  
        } else {
  
          params = {
  
            leaderType: this.leaderType,
  
            highestEdu: this.highestEdu,
  
            pageNum: pageNum,
  
            pageSize: 6
  
          };
  
        }
  
  
  
        this.Axios.Post(URL.getempleMaintainBylist.url, params).then(res => {
  
          this.tableData = res.data.datas;
  
          this.total = res.data.total;
  
        });
  
      }
  
    }
  
  };
</script>

<style scoped>
  .echart {
  
    margin-top: 20px;
  
  }
  
  
  .echart ul {
  
    display: flex;
  
    flex-wrap: wrap;

    margin-bottom: 40px;
  }
  
  
  
  .echart li {
  
    border-top-width: 3px;
  
    border-top-style: solid;
  
    border-top-color: #00a65a;
  
    width: 48.5%;
  
    margin-bottom: 30px;

    overflow: hidden;
  
  }

  .echart li div,
  .echart li h3 {
  
    background-color: #fff !important;
  
  }
  
  
  
  .echart li:nth-of-type(2n-1) {
  
    margin-right: 28px;
  
  }
  
  
  
  .echart .title {
  
    border-bottom: 1px solid #f1f1f1;
  
    line-height: 40px;
  
    display: flex;
  
    justify-content: space-between;
  
    padding: 0 10px;
  
  }
  
  
  
  .echart .title span:first-of-type {
  
    font-size: 18px;
  
    font-family: "Microsoft YaHei", museo-slab, "Helvetica Neue", Helvetica, Arial, sans-serif;
  
    color: rgb(68, 68, 68);
  
    font-weight: normal;
  
  }
  
  
  
  .echart .title span:last-of-type {
  
    font-size: 14px;
  
    font-family: "Microsoft YaHei", museo-slab, "Helvetica Neue", Helvetica, Arial, sans-serif;
  
    color: rgb(151, 160, 179);
  
    font-weight: normal;
  
  }
  
  
  
  .echart .title span:last-of-type i {
  
    margin-left: 10px;
  
  }
  
  
  
   .echart .title i {
     cursor: pointer;
   }
</style>